<template>
  <div>
    <van-cell title="出生年月" required/>
    <div class="input_">
      <van-field
        is-link
        readonly
        clickable
        name="date"
        :value="value"
        placeholder="点击选择时间"
        @click="showPicker = true"
      />
    </div>
    <van-popup v-model="showPicker" position="bottom" :style="{ height: '40%' }" round>
      <van-datetime-picker
        v-model="currentDate"
        type="date"
        title="选择年月日"
        :min-date="minDate"
        :max-date="maxDate"
        :formatter="formatter"
        @confirm="confirm"
      />
    </van-popup>
<!--    工作经验-->
    <van-cell title="工作经验" required/>
    <div class="input_">
      <van-field
        readonly
        clickabler
        name="worker_experience"
        :value="value2"
        placeholder="点击选择工作经验"
        @click="showPicker2 = true"
      />
    </div>
    <van-popup v-model="showPicker2" position="bottom" :style="{ height: '40%' }" round>
      <van-picker
        show-toolbar
        :columns="columns"
        @confirm="onConfirm"
        @cancel="showPicker2 = false"
      />
    </van-popup>
  </div>
</template>

<script>
export default {
  name: 'Date',
  data () {
    return {
      minDate: new Date(1900, 0, 1),
      maxDate: new Date(2025, 10, 1),
      currentDate: new Date(),
      showPicker: false,
      showPicker2: false,
      value: '',
      value2: '',
      columns: ['一年以上', '两年以上', '三年以上']
    }
  },
  methods: {
    formatter (type, val) {
      if (type === 'year') {
        return `${val}年`
      } else if (type === 'month') {
        return `${val}月`
      }
      return val
    },
    confirm (time) {
      this.value = time.getFullYear() + '年' + (time.getMonth() + 1) + '月' + time.getDate() + '日'
      this.showPicker = false
    },
    onConfirm (v) {
      this.value2 = v
      this.showPicker2 = false
    }
  }
}
</script>

<style lang="scss" scoped>

.input_ {
  border: 1px solid #cccccc;
  border-radius: 8px;
}
</style>
